<template>
    <div class="sidebar">
		<ul>
			<li v-for="(item,index) in menuList" :key="index" :class='flag==index?"current":""' @click="changeTab(1,item,index)">
				<template>
					<!-- <img :src='flag==index?item.src:item.icon'> -->
					<span slot="title">{{ item.name }}</span>
				</template>
				
				<!-- <div v-if="item.children && item.children.length && flag == 3">
					<div v-for="(obj,idx) in item.children" :key="idx" :class='itemFlag==idx?"item-active":""' @click.stop="changeTab(2,obj,idx)" class="menu-item">{{ obj.name }}</div>
				</div> -->
			</li>
		</ul>
    </div>
</template>
<script>
	import utils from '@/assets/js/utils';
export default {
    data() {
        return {
			flag:0,
			itemFlag:-1,
			token:"",
            menuList: [
				{name:"云图首页",url:"./model-square"},
				// {name:"在线生图",url:"./create-img"},
				{name:"文本生成模型",url:"./create-model"},
				{name:"图片生成模型",url:"./create-img-model"},
				// {name:"创作指南",url:"./create-guide"},
				// {name:"我要创作",url:"./create-model"},
				{
					name:"个人中心",
					url:"./my-work"
				},
				{
					name:"会员中心",
					url:"./interests"
				},
			],
			subMenuList:[
				{name:"我的作品",url:"./my-work"},
				{name:"我的收藏",url:"./my-collect"},
				{name:"我的积分",url:"./my-integral"}
			],
			teacherlist:[
				{name:"我的学生",url:"./my-student"},
				{name:"学生作品",url:"./student-work"}
			]
        };
    },
	
	created() {
		this.token = utils.getSession('token');
		// const userType = utils.getSession('userType');
		// if(userType == 1){//老师
		// 	this.menuList[3].children = this.subMenuList.concat(this.teacherlist);
		// }
		// else{
		// 	this.menuList[3].children = this.subMenuList;
		// }
	},
    
    methods:{
        changeTab(rank,item,index){
            if(rank == "1"){
                this.flag = index;
				this.itemFlag = -1;
            }
            else{
                this.itemFlag = index;
            }
			if(!item.children){
				if(item.url == "./my-work" || item.url == "./create-model" || item.url == "./create-img-model"){
					if(!this.token){
						this.$message.warning("请先登录");
						this.$router.push("/login");
						return
					}
				}
				this.$router.push({
				    path:item.url
				})
			}
        }
    },
	
	watch: {
	    $route:{
			handler: function (newVal, oldVal) {
				if(newVal.path == "/model-square"){
					this.flag = 0
				}
				else if(newVal.path == "/create-img-model"){
					this.flag = 2
				}
				else if(newVal.path == "/create-model"){
					this.flag = 1
				}
				else if(newVal.path == "/my-work"){
					this.flag = 3
				}
				else if(newVal.path == "/interests" || newVal.path == "/computing-detail"){
					this.flag = 4
				}
			},
			immediate:true,
			deep: true // 开启深度监听
		}
	}
};
</script>

<style lang="scss" scoped>
.sidebar {
	width: 200px;
	height: 100%;
 //    position: absolute;
	// left: 0;
 //    top: 92px;
 //    bottom: 0;
    background: #fff;
	border-right: 1px solid #FFF1DF;
	ul{
		padding: 30px 16px;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		li{
			cursor: pointer;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			width: 100%;
			height: 44px;
			line-height: 44px;
			margin-bottom: 30px;
			text-align: center;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #595959;
			img{
				width: 17px;
				height: 16px;
				vertical-align: middle;
                margin-right: 18px;
			}
			span{
				vertical-align: middle;
			}
			.menu-item{
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
			}
			.item-active{
				color: #FF8D1B;
			}
		}
		.current{
			width: 100%;
			height: 44px;
			background: rgba(253, 133, 13, 0.1);
			border-radius: 4px;
			color: #FD850D;
		}
	}
    
}

</style>
